// 每个根目录中页面根样式
.CONTAINER{
    height: 100%;
    box-sizing: border-box;
    font-size: 16px;
}
//每个子页面 index中div的滚动条样式
.CHAGE_PADDING{
  padding: 10px 10px 10px 30px;  
}
.CHAGE_SCROLLBAR {
    height: 100%;
    // padding-left: 10px;
    overflow: auto;
    &::-webkit-scrollbar {
      /* 滚动条整体样式 */
      width: 14px; /* 高和宽分别对应横向滚动条和竖向滚动条的尺寸 */
      height: 16px;
      // background-color: aqua;
    }
    &::-webkit-scrollbar-thumb {
      /* 滚动条里面小方块 */
      border-radius:10px;
      background-color: rgba(191, 192, 194, 0.6);
      border: 4px solid transparent;
      background-clip: padding-box;
    }
    &::-webkit-scrollbar-thumb:hover {
      background-color: rgba(101, 102, 104, 0.8);
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-track:hover {
      background: transparent;
    }
    //滚动条上下两端的按钮
    &::-webkit-scrollbar-button {
      height: 0px;
      width: 0px;
      background-color: transparent;
      background-image: none;
    }

    //火狐适配
    // scrollbar-color: auto; /* 使用浏览器默认的滚动条样式 */
    // scrollbar-color: dark; /* 使用浏览器默认的深色或者黑色滚动效果 */
    scrollbar-color: light; /* 使用浏览器默认的浅色滚动效果 */
    // scrollbar-color: rgba(191, 192, 194, 0.6) rgba(191, 192, 194, 0.8); /* 第一个颜色为滚动条的颜色， 第二个颜色为滚动条轨道的颜色 */
    scrollbar-width: auto; /* 使用浏览器默认的滚动宽度 */
    scrollbar-width: thin; /* 设置比默认滚动条宽度更窄的宽度 */
    // scrollbar-width: none; /* 隐藏滚动条，但是元素还是可以滚动 */
    scrollbar-width: 66px; /* 直接设置滚动条的宽度，比如 60px 3vh 4wh 5rem 6rm 等长度 */
  }